<template>
  <div class="businessUnit">
    <!-- :cell-style="cellStyle" -->
    <div class="table">
      <el-table :data="tableData"
                border
                :header-cell-style="{
          background: '#0070C0',
          color: '#ffffff',
        }"
                v-loading="tableLoading">
        <el-table-column label="经营单元"
                         prop="areaName"
                         align="center"></el-table-column>
        <el-table-column label="存存量"
                         align="center">
          <el-table-column label="上年12月存量"
                           align="center"
                           prop="lastYearIncomeCl"></el-table-column>
          <el-table-column label="当月存存量"
                           align="center"
                           prop="thisMonthIncomeCcl"></el-table-column>
          <el-table-column label="保有率"
                           align="center"
                           prop="rateCcl">
            <template slot-scope="scope">
              <div>
                {{ scope.row.rateCcl + "%" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="占比码号"
                           align="center"
                           prop="rateOfMhCcl">
            <template slot-scope="scope">
              <div>
                {{ scope.row.rateOfMhCcl + "%" }}
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="存增量"
                         align="center">
          <el-table-column label="上年12月新增量"
                           align="center"
                           prop="lastYearIncomeXzl"></el-table-column>
          <el-table-column label="当月存增量"
                           align="center"
                           prop="thisMonthIncomeCzl"></el-table-column>
          <el-table-column label="保有率"
                           align="center"
                           prop="rateCzl">
            <template slot-scope="scope">
              <div>
                {{ scope.row.rateCzl + "%" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="占比码号"
                           align="center"
                           prop="rateOfMhCzl">
            <template slot-scope="scope">
              <div>
                {{ scope.row.rateOfMhCzl + "%" }}
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="新增量"
                         align="center">
          <el-table-column label="上年同期新增量"
                           align="center"
                           prop="lastYearTqIncomeXzl"></el-table-column>
          <el-table-column label="当月新增量"
                           align="center"
                           prop="thisMonthIncomeXzl">
          </el-table-column>
          <el-table-column label="增长率"
                           align="center"
                           prop="tbInrease">
            <template slot-scope="scope">
              <div v-if="scope.row.tbInrease">
                {{ scope.row.tbInrease + "%" }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column label="占比码号"
                           align="center"
                           prop="rateOfMhXzl">
            <template slot-scope="scope">
                <span>{{scope.row.rateOfMhXzl + '%'}}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getCompletion } from "@/api/barCode/index";
export default {
  name: "businessUnit",
  components: {},
  props: {
    form: {
      type: Object,
      default: {},
    },
  },
  data () {
    return {
      tableLoading: false,
      tableData: [],
    };
  },
  computed: {

  },
  created () { },
  mounted () { },
  methods: {
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      if (row.tbColorSign == "TB_UP_0" && column.label == "累计同比增幅") {
        return "background: #5A8AC6;padding:0;color:black";
      } else if (
        row.tbColorSign == "TB_UP_1" &&
        column.label == "累计同比增幅"
      ) {
        return "background: #7BA1D2;padding:0;color:black";
      } else if (
        row.tbColorSign == "TB_UP_2" &&
        column.label == "累计同比增幅"
      ) {
        return "background: #D9E4F3;padding:0;color:black";
      } else if (
        row.tbColorSign == "TB_DOWN_0" &&
        column.label == "累计同比增幅"
      ) {
        return "background: #F8696B;padding:0;color:black";
      } else if (
        row.tbColorSign == "TB_DOWN_1" &&
        column.label == "累计同比增幅"
      ) {
        return "background: #F98E95;padding:0;color:black";
      } else if (
        row.tbColorSign == "TB_DOWN_2" &&
        column.label == "累计同比增幅"
      ) {
        return "background: #FABCBE;padding:0;color:black";
      } else if (row.hbColorSign == "HB_UP_0" && column.label == "环比增幅") {
        return "background: #5A8AC6;padding:0;color:black";
      } else if (row.hbColorSign == "HB_UP_1" && column.label == "环比增幅") {
        return "background: #7BA1D2;padding:0;color:black";
      } else if (row.hbColorSign == "HB_UP_2" && column.label == "环比增幅") {
        return "background: #D9E4F3;padding:0;color:black";
      } else if (row.hbColorSign == "HB_DOWN_0" && column.label == "环比增幅") {
        return "background: #F8696B;padding:0;color:black";
      } else if (row.hbColorSign == "HB_DOWN_1" && column.label == "环比增幅") {
        return "background: #F98E95;padding:0;color:black";
      } else if (row.hbColorSign == "HB_DOWN_2" && column.label == "环比增幅") {
        return "background: #FABCBE;padding:0;color:black";
      }
      if (row.displayName == "杭州") {
        return "font-weight:bold;color:black;padding:0;";
      }
      return "color:black;padding:0";
    },
    // 获取码号收入整体趋势
    getList () {
      this.tableLoading = true
      getCompletion(this.form).then((res) => {
        if (res.code == 200) {
          this.tableLoading = false
          this.tableData = res.data;
        }
      });
    },
  },
};
</script>

<style scoped>
</style>
